<!--
* @author wn
* @date 2022/05/18 15:04:05
* @description: 自己封装的 checkbox 组件  vueuse 版
*               支持双向数据绑定  支持 change 事件
*     方框 加 其内部 对勾  为一个 字体图标
!-->
<template>
	<div class="xtx-checkbox" @click="toggle">
		<i class="iconfont" :class="check ? 'icon-checked' : 'icon-unchecked'"></i>
		<span v-if="$slots.default"><slot /></span>
	</div>
</template>
<script>
import { useVModel } from '@vueuse/core'
export default {
	name: 'XtxCheckBox',
	props: {
		modelValue: {
			type: Boolean,
			default: false,
		},
	},
	setup(props, { emit }) {
		// 1. 使用 useVModel来包装props中的modelValue属性数据
		// 2. 在使用checked.value就是使用父组件数据
		// 3. 在使用checked.value = '数据' 赋值，触发emit('update:modelValue', '数据')
		// 4  三个 参数   props  props中数据名  emit
		const check = useVModel(props, 'modelValue', emit)
		const toggle = () => {
			// 触发emit('update:modelValue', '数据')
			check.value = !check.value
			// 需要自己实现 change 事件
			emit('change', !check.value)
		}
		return { check, toggle }
	},
}
</script>
<style scoped lang="less">
.xtx-checkbox {
	display: inline-block;
	margin-right: 2px;
	.icon-checked {
		color: @xtxColor;
		~ span {
			color: @xtxColor;
		}
	}

	i {
		position: relative;
		top: 1px;
	}
	span {
		margin-left: 2px;
	}
}
</style>
